<template>
  <div class="w-full">
    <a-range-picker @change="inputVal" allowClear class="w-full" v-model:value="value" :picker="props.type === 'YYYY-YYYY'?'year':props.type === 'MM-MM'?'month':undefined" :placeholder="props.placeholder" />
  </div>
</template>
<script setup>
const emits = defineEmits(['update:value'])
const props = defineProps({
  value: Array,
  placeholder: {
    type: Array,
    default: ['开始', '结束'],
  },
  type: {
    type: String,
    default: 'DD',
  },
})
const state = reactive({
  value: undefined,
  options: [],
})

if (props.value && props.value.length) {
  state.value = [dayjs(props.value[0]), dayjs(props.value[1])]
}

watch(
  () => props,
  (newVal, oldVal) => {
    if (!newVal.value) {
      state.value = undefined
    } else {
      state.value = [dayjs(newVal.value[0]), dayjs(newVal.value[1])]
    }
  },
  { deep: true, immediate: true }
)
const inputVal = (val, item) => {
  if (JSON.stringify(item) === '["",""]') {
    emits('update:value', undefined)
  } else {
    emits('update:value', item)
  }
}

defineExpose({})
const { value } = toRefs(state)
</script>

